<template>
    <div class="entry">
        <div class="form-card">
            <div class="input-wrapper">
                <p class="label">拜访日期</p>
                <div class="input-box">
                    <!-- <input
                        type="text"
                        v-model="form.visit_datetime"
                        readonly
                        class="input"
                        placeholder="请选择拜访日期"
                        @click="show = true"
                    /> -->
                    <input
                        type="text"
                        v-model="form.visit_datetime"
                        readonly
                        class="input"
                        placeholder="请选择拜访日期"
                    />
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('visit_datetime')">* 请选择拜访日期</div>
            <div class="tips" v-if="formatted_address">
                <van-icon name="location-o" class="icon" />
                <div class="tips-text">{{ formatted_address }}</div>
            </div>
            <div class="input-wrapper">
                <p class="label">行政区域</p>
                <div class="input-box">
                    <div class="input-box">{{ form.administrativeRegion }}</div>
                </div>
            </div>
            <div class="input-wrapper">
                <p class="label">客户名称</p>
                <div class="input-box">
                    <el-autocomplete
                        class="input"
                        v-model="form.title"
                        :disabled="$route.query.type === 'detail'"
                        :fetch-suggestions="QueryNearbyClinic"
                        placeholder="请输入客户名称"
                        @select="NearbyClinicChange"
                        @blur="earbyClinicBlur"
                    ></el-autocomplete>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('title') || validateResult.includes('outpatient_id')">
                * 请输入客户名称
            </div>
            <div class="input-wrapper">
                <p class="label">拜访次数</p>
                <div class="input-box">{{ visit_count || 0 }}次</div>
            </div>
            <div class="input-wrapper">
                <p class="label">客户类型</p>
                <div class="input-box">
                    <el-select class="input" v-model="form.customer_type" placeholder="请选择客户类型">
                        <el-option
                            v-for="item in clientTypelList"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('customer_type')">* 请选择客户类型</div>
            <div class="input-wrapper">
                <p class="label">客户层次</p>
                <div class="input-box">
                    <el-select class="input" v-model="form.customer_level" placeholder="请选择客户层次">
                        <el-option
                            v-for="item in customerTiersList"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('customer_level')">* 请选择账客户层次</div>
            <div class="input-wrapper">
                <p class="label">修复医生人数</p>
                <div class="input-box">
                    <input v-model="form.repair_doctors" type="number" class="input" placeholder="请填写修复医生人数" />
                    <div style="font-size: 12px; color: #999999;">位</div>
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('repair_doctors')">* 请填写修复医生人数</div>
            <div class="input-wrapper">
                <p class="label">目前合作工厂名称</p>
                <div class="input-box">
                    <input v-model="form.current_factory" class="input" placeholder="请填写目前合作工厂名称" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('current_factory')">* 请填写目前合作工厂名称</div>
            <div class="input-wrapper">
                <p class="label">每月预估加工费</p>
                <div class="input-box">
                    <el-select class="input" v-model="form.monthly_fee" placeholder="请选择每月预估加工费">
                        <el-option
                            v-for="item in processingFeeList"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('monthly_fee')">* 请选择每月预估加工费</div>
            <div class="input-wrapper">
                <p class="label">合作意向指数</p>
                <div class="input-box">
                    <el-select class="input" v-model="form.cooperation_index" placeholder="请选择合作意向指数">
                        <el-option
                            v-for="item in intentIndexList"
                            :key="item.label"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <van-icon name="arrow" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('cooperation_index')">* 请选择合作意向指数</div>
            <div class="input-wrapper">
                <p class="label">合作意向备忘</p>
                <div class="input-box">
                    <textarea
                        v-model="form.cooperation_notes"
                        class="textarea"
                        placeholder="请填写合作意向备忘"
                    ></textarea>
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('cooperation_notes')">* 请填写合作意向备忘</div>
            <div class="input-wrapper">
                <p class="label">联系人</p>
                <div class="input-box">
                    <input v-model="form.contact" class="input" placeholder="请填写联系人" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('contact')">* 请填写联系人</div>
            <div class="input-wrapper">
                <p class="label">联系电话</p>
                <div class="input-box">
                    <input v-model="form.contact_phone" type="number" class="input" placeholder="请填写联系电话" />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('contact_phone')">* 请填写联系电话</div>
            <div class="input-wrapper">
                <p class="label">联系地址</p>
                <div class="input-box">
                    <input v-model="form.contact_address" class="input" placeholder="请填写联系地址" readonly />
                </div>
            </div>
            <div class="verify" v-if="validateResult.includes('contact_address')">* 请填写联系地址</div>
        </div>

        <div class="input-wrapper">
            <p class="label">备注</p>
            <div class="input-box">
                <textarea v-model="form.remark" class="textarea" placeholder="请填写备注"></textarea>
            </div>
            <div class="verify" style="margin: 0;" v-if="validateResult.includes('remark')">* 请填写备注</div>
        </div>

        <div class="upload-wrapper" v-if="isShowBtn || (form.images.length > 0 && form.finish_status == 2)">
            <p class="label">图片上传</p>
            <p class="uploadtips">*最多只能上传五张图片</p>
            <div class="upload-box">
                <div class="img-box" v-for="(item, index) in form.images" :key="index">
                    <img :src="item" alt="" class="img" @click.stop="previewImg(index)" />
                    <img
                        v-if="isShowBtn"
                        src="@/assets/images/img_05.png"
                        @click.stop="delImg(index)"
                        alt=""
                        class="close"
                    />
                </div>
                <van-uploader
                    v-if="isShowBtn && form.images.length < 5"
                    :after-read="uploadImg"
                    v-loading="uploadLoadingFitting"
                    accept="image/*"
                    multiple
                >
                    <img src="@/assets/images/img_04.png" alt="" class="upload-btn" />
                </van-uploader>
            </div>
            <div class="verify" style="margin: 0;" v-if="validateResult.includes('images')">* 请上传图片</div>
        </div>

        <div class="btnBox" v-if="isShowBtn">
            <div class="submit-btn plan" @click="sumbit(1)" v-loading="submitLoading">暂存</div>
            <div class="submit-btn" @click="sumbit(2)" v-loading="submitLoading">提交</div>
        </div>

        <van-popup v-model="show" position="bottom">
            <van-datetime-picker
                v-model="currentDate"
                type="datetime"
                title="请选择拜访日期"
                :min-date="minDate"
                :max-date="maxDate"
                @cancel="show = false"
                @confirm="handleTime"
            />
        </van-popup>
    </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import moment from "moment";
import { Dialog, ImagePreview, Toast } from "vant";
import axios from "axios";
import { debounce } from "@/util/util";
import wgs84togcj02 from "@/util/geolocation";

export default {
    name: "entry",
    data() {
        return {
            // 时间弹窗
            show: false,
            currentDate: new Date(),
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2100, 10, 1),
            form: {
                // 	拜访日期
                visit_datetime: "",
                // 行政区域
                administrativeRegion: "",
                // 诊所id
                outpatient_id: "",
                // 	客户名称
                title: "",
                // 	客户类型
                customer_type: "",
                // 	客户层次
                customer_level: "",
                // 	修复医生人数
                repair_doctors: "",
                // 	目前合作工厂
                current_factory: "",
                // 	每月预估加工费
                monthly_fee: "",
                // 	合作意向指数
                cooperation_index: "",
                // 	合作意向备忘
                cooperation_notes: "",
                // 	联系人
                contact: "",
                // 	联系电话
                contact_phone: "",
                // 	联系地址
                contact_address: "",
                // 	备注
                remark: "",
                // 完成类型
                finish_status: "",
                // 	上传图片
                images: [],
            },
            // 	客户类型列表
            clientTypelList: [
                {
                    label: "公立",
                    value: "公立",
                },
                {
                    label: "私立",
                    value: "私立",
                },
            ],
            // 	客户层次列表
            customerTiersList: [
                {
                    label: "A",
                    value: "A",
                },
                {
                    label: "B",
                    value: "B",
                },
                {
                    label: "C",
                    value: "C",
                },
                {
                    label: "D",
                    value: "D",
                },
            ],
            // 	每月预估加工费用
            processingFeeList: [
                {
                    label: "2000以下",
                    value: "2000以下",
                },
                {
                    label: "2000-5000",
                    value: "2000-5000",
                },
                {
                    label: "5000-10000",
                    value: "5000-10000",
                },
                {
                    label: "10000-30000",
                    value: "10000-30000",
                },
                {
                    label: "30000-100000",
                    value: "30000-100000",
                },
                {
                    label: "100000以上",
                    value: "100000以上",
                },
            ],
            // 	合作意向指数列表
            intentIndexList: [
                {
                    label: "强烈",
                    value: "强烈",
                },
                {
                    label: "较好",
                    value: "较好",
                },
                {
                    label: "一般",
                    value: "一般",
                },
                {
                    label: "无意向",
                    value: "无意向",
                },
            ],
            // 	是否加载中
            submitLoading: false,
            // 	图片上加载总
            uploadLoadingFitting: false,
            // 	经纬度
            location: {
                // 	纬度
                latitude: "31.832856",
                // 	经度
                longitude: "117.232968",
                // 	省份
                province: "",
                // 	城市
                city: "",
                // 	区域
                district: "",
            },
            // 精确定位地址
            formatted_address: "",
            // select组件搜索时loading
            searchloading: false,
            // 	拜访次数
            visit_count: 0,
            // 表单校验结果
            validateResult: [],
            // 是否显示按钮
            isShowBtn: true,
            /** 客户列表 */
            clientList: [],
        };
    },
    mounted() {
        this.form.visit_datetime = this.currentTime;
        this.getLocation();
        // H5获取定位
        if (this.$route.query.type === "detail") this.getDetail();
    },
    computed: {
        // 获取当前时间
        currentTime() {
            return moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
        },
    },
    watch: {
        form: {
            handler(val) {
                for (var i = this.validateResult.length - 1; i >= 0; i--) {
                    const field = this.validateResult[i];
                    // 对 images 字段进行特殊处理
                    if (field === "images") {
                        // 只有当图片数组有内容时才移除验证错误
                        if (val[field] && val[field].length > 0) {
                            this.validateResult.splice(i, 1);
                        }
                    } else {
                        // 其他字段的常规处理
                        if (val[field]) {
                            this.validateResult.splice(i, 1);
                        }
                    }
                }
            },
            deep: true,
        },
    },
    methods: {
        /** 获取浏览器定位 */
        getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(this.showPosition, null, {
                    enableHighAccuracy: true,
                    timeout: 5000,
                    maximumAge: 0,
                });
            } else {
                Toast("您的浏览器不支持获取地理位置");
            }
        },
        showPosition(position) {
            if (this.$route.query.type == "edit") {
                const { lon, lat } = wgs84togcj02(position.coords.longitude, position.coords.latitude);
                this.location.longitude = String(Number(parseFloat(`${lon}`).toFixed(6)));
                this.location.latitude = String(Number(parseFloat(`${lat}`).toFixed(6)));
                axios
                    .get("https://restapi.amap.com/v3/geocode/regeo", {
                        params: {
                            key: "889cd803b95da3d06e95b78339e2daa0",
                            location: `${this.location.longitude},${this.location.latitude}`,
                        },
                    })
                    .then((res) => {
                        const { formatted_address, addressComponent } = res?.data?.regeocode;
                        const { province, city, district } = addressComponent;
                        this.location = { ...this.location, province, city, district };
                        this.formatted_address = formatted_address;
                        this.form.contact_address = formatted_address;
                        this.form.administrativeRegion = `${province} ${city} ${district}`;
                    });
            }
        },
        // 获取详情
        async getDetail() {
            const res = await this.$api.visit_info({ outpatient_visit_id: this.$route.query.id });
            if (res) {
                const { visit_count, province, city, district } = res?.data?.outpatient;
                const form = Object.keys(this.form).reduce((acc, key) => {
                    acc[key] = res?.data?.[key];
                    return acc;
                }, {});
                // 处理图片
                this.form = { ...form, images: res.data?.images.split(",").filter(Boolean) };
                this.visit_count = visit_count;

                //暂存状态详情 更新时间
                // if (res?.data?.finish_status == 1) {
                //     this.form.visit_datetime = this.currentTime;
                // }·

                this.form.administrativeRegion =
                    province == city ? `${province} ${district}` : `${province} ${city} ${district}`;
                this.formatted_address = res?.data?.contact_address;
                this.isShowBtn =
                    JSON.parse(sessionStorage.getItem("userinfo"))?.userinfo.id == res?.data?.user?.id &&
                    res?.data?.finish_status == 1;
            }
        },
        // 搜索客户名称
        async QueryNearbyClinic(query, cb) {
            const _this = this;
            if (
                !this.location.longitude ||
                this.location.longitude == "NaN" ||
                !this.location.latitude ||
                this.location.latitude == "NaN"
            )
                return cb([]), Toast("定位失败，无法搜索客户");
            const res = await this.$api.get_nearby_clinic({
                longitude: this.location.longitude,
                latitude: this.location.latitude,
                distance: 200,
                key: query,
            });

            if (res?.data && res.data.length > 0) {
                cb(
                    res.data.map((item) => {
                        return { ...item, value: item.title };
                    })
                );
                _this.clientList = res.data.map((item) => {
                    return { ...item, value: item.title };
                });
            } else {
                cb([{ value: query, type: "add" }]);
                _this.clientList = [{ value: query, type: "add" }];
            }
        },

        /** 查询最近的拜访记录 */
        async recentVisits(id) {
            const res1 = await this.$api.visit_lists({ outpatient_id: id });
            if (res1 && res1.data?.data.length > 0) {
                const { visit_count, province, city, district } = res1?.data?.data[0].outpatient;
                const form = Object.keys(this.form).reduce((acc, key) => {
                    acc[key] = res1?.data?.data[0]?.[key];
                    return acc;
                }, {});
                this.form = {
                    ...form,
                    images: res1?.data?.data[0]?.images?.split(",").filter(Boolean),
                    visit_datetime: this.currentTime,
                    contact_address: this.formatted_address,
                    administrativeRegion: this.form.administrativeRegion,
                };
                this.visit_count = visit_count;
                // this.form.administrativeRegion =
                //     province == city ? `${province} ${district}` : `${province} ${city} ${district}`;
            } else {
                this.clearForm(["administrativeRegion", "outpatient_id", "title", "visit_datetime"]);
                this.form.visit_datetime = this.currentTime;
                this.form.contact_address = this.formatted_address;
            }
        },
        // 客户名称选择事件
        async NearbyClinicChange(val) {
            // earbyClinicBlur也要同步更改
            if (!val.type) {
                const { id, province, city, district } = val;
                this.form.outpatient_id = id;
                // this.form.administrativeRegion =
                //     province == city ? `${province} ${district}` : `${province} ${city} ${district}`;

                // 查询拜访次数
                const res = await this.$api.clinic_info({ outpatient_id: id });
                if (res?.data) this.visit_count = res?.data?.visit_count;

                // 查询拜访记录 如果有的记录则回显最近的一条 否则清空表单
                this.recentVisits(id);
            }

            // 添加客户
            if (val?.type && val?.type == "add") {
                this.getLocation();
                if (
                    !this.location.longitude ||
                    this.location.longitude == "NaN" ||
                    !this.location.latitude ||
                    this.location.latitude == "NaN"
                )
                    return cb([]), Toast("定位失败，无法添加客户");
                Dialog.confirm({ title: "提示", message: "您还未添加该客户，是否添加？" }).then(async () => {
                    const [province, city, district] = this.form.administrativeRegion.split(" ");
                    const res = await this.$api.add_clinic({
                        province,
                        city: city || province,
                        district,
                        longitude: this.location.longitude,
                        latitude: this.location.latitude,
                        title: val?.value,
                    });
                    console.log("添加客户请求参数", {
                        province,
                        city: city || province,
                        district,
                        longitude: this.location.longitude,
                        latitude: this.location.latitude,
                        title: val?.value,
                    });
                    console.log("添加客户返回结果", res);
                    if (res.code != 1) return Toast(res.msg);
                    if (res?.msg == "门诊已存在") return this.recentVisits(res?.data?.id);
                    this.clearForm([
                        "administrativeRegion",
                        "outpatient_id",
                        "title",
                        "visit_datetime",
                        "contact_address",
                        "images",
                    ]);
                    this.form.outpatient_id = res?.data?.id;
                    this.form.contact_address = this.formatted_address;
                });
            }
        },

        /** 客户列表失焦事件 */
        async earbyClinicBlur() {
            // NearbyClinicChange事件也要同步更改
            if (this.clientList.length > 1) return;
            const data = this.clientList[0];

            if (!data.type) {
                const { id, province, city, district } = data;
                this.form.outpatient_id = id;
                // this.form.administrativeRegion =
                //     province == city ? `${province} ${district}` : `${province} ${city} ${district}`;
                // 查询拜访次数
                const res = await this.$api.clinic_info({ outpatient_id: id });
                if (res?.data) this.visit_count = res?.data?.visit_count;

                // 查询拜访记录 如果有的记录则回显最近的一条 否则清空表单
                this.recentVisits(id);
            }

            // 添加客户
            if (data?.type && data?.type == "add") {
                this.getLocation();
                if (
                    !this.location.longitude ||
                    this.location.longitude == "NaN" ||
                    !this.location.latitude ||
                    this.location.latitude == "NaN"
                )
                    return cb([]), Toast("定位失败，无法添加客户");
                Dialog.confirm({ title: "提示", message: "您还未添加该客户，是否添加？" }).then(async () => {
                    const [province, city, district] = this.form.administrativeRegion.split(" ");
                    const res = await this.$api.add_clinic({
                        province,
                        city: city || province,
                        district,
                        longitude: this.location.longitude,
                        latitude: this.location.latitude,
                        title: data?.value,
                    });
                    console.log("添加客户请求参数", {
                        province,
                        city: city || province,
                        district,
                        longitude: this.location.longitude,
                        latitude: this.location.latitude,
                        title: data?.value,
                    });
                    console.log("添加客户返回结果", res);
                    if (res.code != 1) return Toast(res.msg);
                    if (res?.msg == "门诊已存在") return this.recentVisits(res?.data?.id);
                    this.clearForm([
                        "administrativeRegion",
                        "outpatient_id",
                        "title",
                        "visit_datetime",
                        "contact_address",
                        "images",
                    ]);
                    this.form.outpatient_id = res?.data?.id;
                    this.form.contact_address = this.formatted_address;
                });
            }
        },
        // 图片上传
        uploadImg(file) {
            if (this.form.images.length > 5 || file.length > 5) return Toast("最多上传5张图片");
            this.uploadLoadingFitting = true;
            this.$api
                .qiniu_token()
                .then((res) => {
                    const token = res.data.token;
                    const requestList = [];
                    const fileList = file.length ? file : [file];
                    fileList.forEach((item) => {
                        let form = new FormData();
                        form.append("token", token);
                        form.append("file", item.file);
                        form.append("key", uuidv4() + item.file.name.substring(item.file.name.lastIndexOf(".")));
                        requestList.push(this.$api.qiniup(form));
                    });
                    Promise.all(requestList)
                        .then((res) => {
                            console.log("图片上传结果", res);
                            this.uploadLoadingFitting = false;
                            res.forEach((response) => {
                                this.form.images.push("https://oss.ykshuju.com/" + response.key);
                            });
                            console.log("表单图片上传结果", this.form.images);
                        })
                        .catch((e) => {
                            this.uploadLoadingFitting = false;
                        });
                })
                .catch((e) => {
                    this.uploadLoadingFitting = false;
                });
            return false;
        },
        delImg(index) {
            this.form.images.splice(index, 1);
        },
        handleTime(value) {
            this.form.visit_datetime = moment(value).format("YYYY-MM-DD HH:mm:ss");
            this.show = false;
        },
        // 提交事件(防抖)
        sumbit: debounce(
            function(event) {
                this.handleSubmit(event);
            },
            800,
            true
        ),
        // 提交表单
        async handleSubmit(type) {
            this.validateResult = [];
            this.form.finish_status = type;
            // 暂存时校验逻辑
            if (type == 1) {
                const includesfieds = ["visit_datetime", "title", "outpatient_id", "administrativeRegion"];
                Object.keys(this.form)
                    .filter((item) => includesfieds.includes(item))
                    .forEach((key) => {
                        if (!this.form[key]) this.validateResult.push(key);
                    });
            }

            // 提交时校验逻辑
            if (type == 2) {
                const exc = ["weigh"];
                Object.keys(this.form)
                    .filter((item) => !exc.includes(item))
                    .forEach((key) => {
                        if (key === "images") {
                            // 对于图片数组，需要特殊处理
                            if (this.form.images.length === 0) {
                                // 确保不会重复添加
                                if (!this.validateResult.includes(key)) {
                                    this.validateResult.push(key);
                                }
                            }
                        } else {
                            // 其他字段的常规验证
                            if (!this.form[key]) {
                                if (!this.validateResult.includes(key)) {
                                    this.validateResult.push(key);
                                }
                            }
                        }
                    });
            }

            if (this.validateResult.length > 0) return Toast("请填写完整表单后再提交");
            const newimages = this.form.images.length > 0 ? this.form.images.join(",") : "";
            try {
                const res =
                    this.$route.query.type == "edit"
                        ? await this.$api.add_clinic_visit({ ...this.form, images: newimages })
                        : await this.$api.edit_visit({
                              ...this.form,
                              images: newimages,
                              outpatient_visit_id: Number(this.$route.query.id),
                          });
                if (res.code != 0) {
                    Toast(type == 1 ? "暂存成功" : "提交成功");
                    this.clearForm(["administrativeRegion", "visit_datetime"]);
                    this.visit_count = 0;
                } else {
                    Toast(res.msg);
                }
            } catch (err) {
                console.log("错误", err);
            }
        },
        // 	图片预览
        previewImg(index = 0) {
            ImagePreview({ images: this.form.images, startPosition: index, closeable: true });
        },
        // 清空表单
        clearForm(exclude = []) {
            Object.keys(this.form)
                .filter((item) => !exclude.includes(item))
                .forEach((key) => {
                    this.form[key] = "";
                    if (key === "images") {
                        this.form[key] = [];
                    }
                });
            this.visit_count = 0;
        },
    },
};
</script>

<style lang="scss" scoped>
.entry {
    min-height: 100vh;
    padding-top: 0.37rem;
    background: linear-gradient(to bottom, #c4e1e6, #f6f6f6, #f6f6f6);

    .tips {
        font-size: 12px;
        color: #7e8c8d;
        margin: 5px 0 0 15px;
        display: flex;
        align-items: flex-start;
        gap: 5px;

        .icon {
            margin-top: 4px;
        }

        &-text {
            line-height: 20px;
        }
    }

    .form-card {
        width: 9.2rem;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 0.24rem;

        .input-wrapper {
            padding: 0.77rem 0.4rem 0.27rem;
            border-bottom: 1px solid #eee;
            margin-bottom: 0;

            &:nth-child(3) {
                padding-top: 0.5rem;
            }

            .label {
                margin-bottom: 0.32rem;
                font-size: 15px;
                color: #000;
            }

            .input-box {
                display: flex;
                align-items: center;

                .input {
                    font-size: 14px;
                    line-height: 22px;
                    flex: 1;
                    padding-right: 0.21rem;
                    color: #606266;

                    &::placeholder {
                        color: #c0c4cc;
                    }
                }

                ::v-deep .el-input__inner {
                    border: none;
                    padding-left: 0;
                    height: 22px;
                    font-size: 14px;
                    line-height: 22px;
                }

                ::v-deep .el-input__suffix {
                    display: none;
                }

                .van-icon {
                    color: #999999;
                }
            }
        }
    }

    .input-wrapper {
        padding: 0.77rem 0.4rem 0.27rem;
        background-color: #fff;
        width: 9.2rem;
        margin: 0 auto 0.48rem;
        border-radius: 8px;

        .label {
            margin-bottom: 0.32rem;
            font-size: 15px;
            color: #000;
        }

        .input-box {
            display: flex;
            align-items: center;

            .textarea {
                height: 66px;
                flex: 1;
                padding-right: 0.21rem;
                border: none;
                resize: none;
                font-size: 14px;
                line-height: 22px;
                color: #606266;

                &::placeholder {
                    color: #c0c4cc;
                }
            }
        }
    }

    .verify {
        font-size: 12px;
        color: #d90013;
        margin-left: 15px;
        margin-top: 10px;
    }

    .upload-wrapper {
        width: 9.2rem;
        margin: 0 auto 0.53rem;
        display: grid;
        grid-gap: 10px;

        .label {
            font-size: 15px;
            color: #000;
        }

        .uploadtips {
            font-size: 12px;
            color: #d90013;
        }

        .upload-box {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;

            .img-box {
                position: relative;

                .img {
                    width: 100%;
                    height: 113px;
                    border-radius: 10px;
                    object-fit: cover;
                }

                .close {
                    display: block;
                    width: 0.48rem;
                    height: 0.48rem;
                    position: absolute;
                    top: 5px;
                    right: 5px;
                }
            }

            .upload-btn {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }

    .btnBox {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 15px;
        position: sticky;
        bottom: 0px;
        background-color: white;
    }

    .submit-btn {
        width: 100%;
        margin: 0 auto;
        height: 1.01rem;
        line-height: 1.01rem;
        text-align: center;
        background-color: #50b1c1;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
    }

    .plan {
        background-color: transparent;
        border: 1px solid #50b1c1;
        color: #50b1c1;
    }
}
</style>
